Vue Prop

2022-04-21
javascript vue2.0

在组建基础中，我们讲解了 Prop是作为一个DOM属性绑定，而不是属性绑定，如果有不了解或不知道的读者可以阅读下前面几章的内容最后来阅读本章。

大小写

通常情况下，HTML中的属性名称是不存在大小写敏感的，所以浏览器大多都会将大写字母解释为小写字母，这也就意味着驼峰命名的方式需要使用其段横线分割的命名方式。

类型

通常的情况下，我们的Props类型都会为字符串类型，对此，Vue为我们提供了一个多种类型的选择方式，如：

ID	DA
String	字符串
Number	数字
Boolean	布尔
Array	数组
Object	对象
Function	功能
Promise	承诺

对此，我们的 code 可以将之前单纯的定义属性之后，在指定其类型，如:

1	props: ['title', 'age']

改为：

1
2
3

props: {
    title: String,
    age: Number,

如：

<script>
    Vue.component("props", {
        props: {
            title: String,
            age: Number,
        },
        template: '<h1>{{title}}</h1>'
    })
    new Vue (
        {el: '#props'}
    )
</script>

传递静态和动态

当一切执行完成之后你会发现，即使我使用的是 age，但vue并没有起到什么实质性的效果，甚至还可以输入Hello,world字符串类型的数据。在这个时候，由于我们传递给 prop中是静态 Prop即：

<div id="props">
    <props age="10"></props>
</div>
<script>
    Vue.component("props", {
        props: {
            title: String,
            age: Number,
        },
        template: '<h1>{{age}}</h1>'
    })
    new Vue (
        {el: '#props'}
    )
</script>

如果想传递一个动态 Prop，需要使用v-bind或:即v-bind的缩写来让其成为一个动态的 prop：

<div id="props">
    <props :age="10"></props>
</div>
<script>
    Vue.component("props", {
        props: {
            title: String,
            age: Number,
            text: [String, Number]
        },
        template: '<h1>{{age}}</h1>'
    })
    new Vue (
        {el: '#props'}
    )
</script>

当使用过v-bind来传递 Prop的时候，那么所有的数据都将是动态的 prop，所以 vue 也可以根据所定义的属性来进行判断 Prop数据是否符合所定义的Prop 类型

验证

除了指定 Prop 的类型之外，我们也可以使用 vue 为我们所提供的 Prop 验证，（虽然这一点有点像是 Laravel 所提供的表单验证，但在Vue中也被发挥的琳琳尽至）。

<div id="app">
    <props-component :title-data="titleData"></props-component>
</div>
<script>
    var propsComponent = {
        props: {
            titleData: {
                type: String,
                required: true
            }
        },
        template: '<h1>{{titleData}}'
    };

    var vm = new Vue({
        components: {
            'props-component':propsComponent
        },
        el: '#app',
        data: {
        }
    })
</script>

在上图之中，主要来验证titleData属性是否存在数据，如果存在数据则进行显示，但如果没有数据则会在控制台中输出错误。

默认值

在通常的情况下，如果你不指定相关数据，那么将会被输出为null即空，且不可见，对于这种情况，我们可以使用 vue 所提供的default方法来设置一个组件的默认值，而默认值的数据则是其属性内的信息，如：

<div id="props">
    <props :age="101"></props>
    <props></props>
</div>
<script>
    Vue.component("props", {
        props: {
            age: {
                type: Number,
                default: 1
            }
        },
        template: '<h1>{{age}}</h1>'
    })
    new Vue (
        {el: '#props'}
    )
</script>

⬅️ Go back